/*
 * @Description: 单个站点的公交列表
 * @Author: yingying.fan
 * @Date: 2019-05-10 18:18:34
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-28 18:29:23
 */
 <template>
  <!-- <div
    class="flex-v flex-he flex-vc route-bus-list-wrapper"
    :style="listStyle"
    ref="popParent"
    @click="showPop"
  > -->
  <!-- </div> -->
  <bus
    :busInfo="showBusInfo"
    :showNormal="needShowPop"
    class="route-bus-list-wrapper"
    :busStyle="listStyle"
    ref="popParent"
    @click.native="showPop"
  >
    <span
      class="baseBgColorNoActive bus-num"
      v-show="needShowPop"
    >X{{busList.length}}</span>
  </bus>
</template>

<script>
import RouteLineBusItem from './RouteLineBusItem'
import BusPopWindow from './BusPopWindow'
// import { getConverseUnit } from '@/utils/UnitConversionUtils.js'
import { getPicUnit } from '@/utils/UnitConversionUtils.js'
import { showBusInfoMask } from '../api/busPlugin.js'
import anime from 'animejs'
import { getLastLeftPxByBusCard, updateLastLeftPx } from '../api/busPositionUtils'

const BUS_SPEED = 80

export default {
  components: {
    'bus': RouteLineBusItem
  },
  props: {
    stationIndex: {
      type: Number,
      default: 0
    },
    busList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isShowPop: false,
      halfBigBusWidth: 42.0, // 大车的一半宽度
      halfSmallBusWidth: 30.0, // 小车的一半宽度
      stationItemWidth: 150.0 // 一个站点组件的宽度，为了定位车辆
    }
  },
  mounted() {
    this.busDrive()
  },
  computed: {
    // 是否需要展示车辆弹窗，超出1辆车需要
    needShowPop() {
      return this.busList.length > 1
    },
    // 默认展示的车的信息
    showBusInfo() {
      return this.busList[0]
    },
    // 实际展示的车辆的一半宽度
    realHalfBusWidth() {
      // 距离选中站点即将到站的车辆大一些
      // if (this.showBusInfo.closeToStation) {
      //   return this.halfBigBusWidth
      // }
      return this.halfSmallBusWidth
    },
    // 这个列表组件的left样式，单位设计图的px
    listLeftPx() {
      // return this.getNowListLeftPx()
      return getLastLeftPxByBusCard(this.showBusInfo.busCard)
    },
    // 这个列表组件的样式
    listStyle() {
      if (this.stationIndex >= 0) {
        return `left:${this.listLeftPx / 75.0}rem`
      } else {
        return 'left:0;display:none;'
      }
    },
    // 多辆车弹窗应该加载的父元素
    popParent() {
      return this.$refs.popParent.$parent.$parent.$el
    },
    // 计算弹窗的bottom,单位设计图的px
    popBottom() {
      return getPicUnit(this.popParent.offsetHeight) + 98
    }
  },
  watch: {
    // 公交列表数据变化时自动隐藏弹窗
    busList(newValue, oldValue) {
      if (newValue) {
        BusPopWindow.hide()
      }
    }
  },
  methods: {
    getNowListLeftPx() {
      let leftPx = 0
      if (this.showBusInfo.isArrived) {
        // 要到站的定位在小圆点上
        leftPx += this.stationItemWidth * (this.stationIndex + 0.5) - this.halfSmallBusWidth
      } else {
        // 未到站的定位在小箭头上
        // 车辆属于第一站之后的都需要加上第一个横线的宽度
        leftPx += this.stationItemWidth * (this.stationIndex + 1) - this.realHalfBusWidth
      }
      return leftPx
    },
    showPop() {
      if (this.needShowPop) {
        // 超出一辆车时，点击车子，弹出所有车辆的弹框
        let scrollLeft = getPicUnit(this.popParent.scrollLeft)
        // 50是弹框一半的宽度
        let popLeft = this.getNowListLeftPx() - scrollLeft - (50 - this.realHalfBusWidth)
        BusPopWindow.show({
          busList: this.busList,
          popStyle: {
            left: popLeft,
            bottom: this.popBottom
          }
        }, this.popParent)
        // this.isShowPop = !this.isShowPop
      } else {
        // 只有一辆车时，点击车子，调用插件，弹出车辆信息弹框
        showBusInfoMask(this, this.showBusInfo).then(() => {
          this.$EventBus.$emit('refreshDataWithoutPop')
        })
      }
    },
    busDrive() {
      let leftPx = this.getNowListLeftPx()
      console.log('~~' + this.stationIndex, leftPx)
      // 当初始left和计算得到的left不等时，执行位移动画，并且更新到map中
      if (leftPx !== this.listLeftPx) {
        // 当初始位置为0时，不做动画效果
        let duration = 0
        if (this.listLeftPx !== 0) { duration = (leftPx - this.listLeftPx) / BUS_SPEED * 75 }
        let left = (leftPx / 75) + 'rem'
        anime({
          targets: this.$refs.popParent.$el,
          left: left,
          duration: duration,
          easing: 'linear'
        })
        updateLastLeftPx(this.showBusInfo.busCard, leftPx)
      }
    }
  }
}
</script>

<style scoped>
.route-bus-list-wrapper {
  position: absolute;
  top: 0px;
  height: 88px;
  opacity: 1;
  text-align: center;
  /* background-color: #ffffff; */
}
.bus-num {
  display: block;
  width: 40px;
  height: 24px;
  line-height: 28px;
  border-radius: 8px;
  font-size: 10px; /*no*/
  color: #ffffff;
  margin-bottom: 10px;
}
</style>
